
*{
  margin: 0;
  padding: 0;
  list-style: none;
  body{
    font-size:36px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    .wrapper{
      width: 100vw;
      height: 100vh;
      padding-top: 60px;
      box-sizing:border-box;
      background-color: rgba(0,0,0,0.2);
      .song-img{ //正方形
        position:relative;
        width: 70%;
        height: 0;
        padding-top: 70%;
        //border: 1px solid #000;
        margin:0 auto;
        .img-box{
          display: flex;
          justify-content: center;
          align-items: center;
          position:absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right:0;
          border-radius: 50%;
          background-color: #000;
          img{
            width: 75%;
            height: 75%;
            border-radius: 50%;
          }
        }
      }
      .song-info{
        width: 100%;
        margin-top: 150px;
        font-size: 36px;
        text-align: center;
        height:286px;
        color: #fff;
        //border: 1px solid #000;
          .song-name{
          font-size: 48px;
          line-height: 42px;
          margin-top: 50px;
          margin-bottom: 50px;
        }
        .singer-name{
          margin-bottom: 20px;
        }
      }

      /* 进度条 */
      .pro {
        display: flex;
        .cur-time,
        .all-time {
          width: 120px;
          height: 80px;
          // border: 1px solid #000;
          color: #fff;
          text-align: center;
          line-height: 80px;
        }
        .pro-wrap {
          flex: 1;
          // border: 1px solid #000;
          position: relative;
          overflow: hidden;
          top:20px;
          .pro-top,
          .pro-bottom{
            position: absolute;
            width:97%;
            height:3px;
            top:18px;
            left: -30px;
          }
          .pro-bottom{
            background-color:rgba(255,255,255,0.3);
            left: 30px;
          }
          .pro-top{
            left: 10px;
            // position: relative;
            background-color:#FFF;

            right:20px;
            transform: translateX(-100%);
            .slider-point{
              width:21px;
              height:21px;
              position: absolute;
              right:-10px;
              top:-10px;

              display:flex;
              justify-content: center;
              align-items: center;
              &::after{
                content:"";
                display:block;
                width:20px;
                height:20px;

                background-color:#FFF;
                border-radius:50%;
              }
            }
          }
        }
      }

      //底部菜单
      .control{
        width: 100%;
        height: 120px;
        position: absolute;
        bottom: 0;
        background-color: rgba(0,0,0,0.6);
        display: flex;
        .btn{
          flex: 1;
          width: 20%;
          height: 100%;
          background-repeat: no-repeat;
          background-size: 26%;
          background-position: center center;
        }
        .like{
          background-image: url("../images/icon-like.png");
          &.liking{
            background-image: url("../images/icon-like-solid.png");
          }
        }
        .prev{
          background-image: url("../images/icon-prev.png");
        }
        .play{
          background-image: url("../images/icon-play.png");
          &.playing{
            background-image: url("../images/icon-pause.png");
          }
        }
        .next{
          background-image: url("../images/icon-next.png");
        }
        .list{
          background-image: url("../images/icon-playlist.png");
        }
      }
    }
  }
}